import React, { useState } from 'react';

export default function Modal(props) {
  const { title, children, visible, onOk, onCancel } = props;
  const clickOk = () => {
    onOk();
  };
  const clickCancel = () => {
    onCancel();
  };
  return (
    <div
      style={{
        display: visible ? 'block' : 'none',
        position: 'fixed',
        height: '100%',
        width: '100%',
        top: '0',
        left: '0',
        backgroundColor: 'rgba(0,0,0,.5)',
        zIndex: '99999',
      }}
    >
      <div
        style={{
          width: '450px',
          overflow: 'hidden',
          backgroundColor: '#fff',
          position: 'fixed',
          top: '50%',
          left: '50%',
          borderRadius: '5px',
          transform: 'translate(-50%, -50%)',
        }}
      >
        <div
          style={{
            width: '100%',
            height: '50px',
            padding: '5px 20px 5px 20px',
            lineHeight: '40px',
            fontSize: '16px',
            fontWeight: '600',
            borderBottom: '1px solid #ccc',
          }}
        >
          {title ? title : '标题自己写'}
        </div>
        <div
          style={{
            padding: '20px 20px 20px 20px',
          }}
        >
          <div>
            {children.map((item, index) => {
              return <div key={index}>{item.props.children}</div>;
            })}
          </div>
        </div>
        <div
          style={{
            overflow: 'hidden',
            borderTop: '1px solid #ccc',
            padding: '5px 20px 5px 20px',
          }}
        >
          <div
            style={{
              width: '50px',
              height: '30px',
              marginLeft: '10px',
              lineHeight: '30px',
              float: 'right',
              color: '#fff',
              textAlign: 'center',
              borderRadius: '3px',
              backgroundColor: '#1890ff',
              float: 'right',
            }}
            onClick={clickOk}
          >
            确定
          </div>
          <div
            style={{
              width: '50px',
              height: '30px',
              marginLeft: '10px',
              lineHeight: '30px',
              float: 'right',
              color: 'black',
              textAlign: 'center',
              borderRadius: '3px',
              border: '1px solid #ccc',
              float: 'right',
            }}
            onClick={clickCancel}
          >
            取消
          </div>
        </div>
      </div>
    </div>
  );
}
